<template>
  <div class="prcList">
    <Loading v-if="loading"></Loading>
    <div class="info" v-else>
        <table class="listInfo" v-if="!showStart">
            <thead>
              <tr>
                <td>编号</td>
                <td>名称</td>
                <td>排序</td>
                <td>二级</td>
                <td>操作</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableData">
                <td>{{item.id}}</td>
                <td>{{item.category_name}}</td>
                <td>{{item.category_sort}}</td>
                <td class="txtLeft">
                  <span v-for="list in item.son">
                    {{list.category_name}}
                  </span>
                </td>
                <td>
                  <a @click="getMore(item)">编辑</a>
                  <a @click="getDelete(item)">删除</a>
                </td>
              </tr> 
            </tbody>
        </table>
        <div class="itemInfo" v-if="showStart">
            <div class="formBox">
                <p class="item"><span class="name">一级栏目 ：</span>
                  <input v-model="date.category_name" class="" placeholder="请输入内容"></input>
                  <input v-model="date.category_sort" class="solt" placeholder="排序"></input>
                  <button @click="submit">修改</button>
                  <button @click="getDelete(item)">删除</button>
                </p>
                <div class="itemBox" v-for="item in secData">
                  <p class="item"><span class="name">二级栏目 ：</span>
                    <input v-model="item.category_name" class="" placeholder="请输入内容"></input>
                    <input v-model="item.category_sort" class="solt" placeholder="排序"></input>
                    <button @click="putItem(item)">修改</button>
                    <button @click="getDelete(item)">删除</button>
                  </p>
                </div>
                
                <p class="item inputBox"><button @click="empty" class="emptyInput">返回</button></p>
            </div>
        </div> 
    </div>
    
  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import { Get, Post,Put,Delete } from '@/config/api'
import axios from 'axios'
export default {
  name: 'prcList',
  data() {
    return {
      loading:true,
      tableData: [],
      tableNum:20,//每页显示多少条
      tableCont:0,//一共有多少条信息
      tablePage:1,//当前页码
      showStart:false,//修改窗口
      type:[],
      secData:[],
      date:{
          id:'',
          category_name:'',
          category_sort:''
        }
    }
  },
  filters: {  
    filterType: function (value) {  
      if(value==1){
        return '显示'
      }else{
        return '隐藏'
      }
      
    }  
  },
  mounted(){
    this.getData()
  },
  components:{
    Loading
  },
  methods:{
    //获取数据
    async getData(e){
      if(this.Check()){
        let reg=await Get('/goods/category/all',this.$store.state.token)
        console.log(reg)
        this.tableData=reg.data
        this.loading=false
      } 
    },
    //信息详情
    getMore(e){
        console.log(e)
        this.secData=e.son
        this.date.id=e.id
        this.date.category_name=e.category_name
        this.date.category_sort=e.category_sort
        this.showStart=true
    },
    //提交修改信息
    async putItem(val){
      console.log(val)
      let data={
          "category_name":val.category_name,
          "category_sort":val.category_sort
      }
      let that=this
      await Put('/goods/category/'+val.id,this.$store.state.token,data).then(function(reg){
        console.log(reg)
        alert('修改成功')
        that.showStart=false
        that.getData()
      }).catch(function(err){
        alert(err.data.message)
      })
    },
    //提交修改信息
    async submit() {
      let data={
          "category_name":this.date.category_name,
          "category_sort":this.date.category_sort
      }
      let that=this
      await Put('/goods/category/'+this.date.id,this.$store.state.token,data).then(function(reg){
        console.log(reg)
        alert('修改成功')
        that.showStart=false
        that.getData()
      }).catch(function(err){
        alert(err.data.message)
      })
    },
    //取消修改
    empty() {
      this.showStart=false
    },
    //上传图片
    upImg(e){
            let that=this
            let reader = new FileReader();
            reader.onload = (function (file) {
                return function (e) {
                   that.date.img=this.result
                };
            })(e.target.files[0]);
            reader.readAsDataURL(e.target.files[0]);
    },
    //删除商品
    async getDelete(e){
      if(this.Check()){
        await Delete('/goods/category/'+e.id,this.$store.state.token).then(function(reg){
          alert('删除成功');
          this.getData()
        }.bind(this)).catch(function(err){
          alert(err.response.data.message);
        })
        this.showStart=false
      }
    }
  }
}

</script>

